<template>
  <div>
    <!--{{empList}}-->
      <emp-edit ref="empEdit" v-on:save-finished="getRoleList()"></emp-edit>
      <el-row class="search-row">
        <el-col :span="12">
           <el-select placeholder="请选择" v-model="search.deptId" size="small">
            <el-option
              v-for="item in depts"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input placeholder="姓名" size="small" v-model="search.name">
            <el-button slot="append" icon="el-icon-search" @click="getRoleList()"></el-button>
          </el-input>

        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" size="small"
            v-show="permission.add" @click="handleCreateEmp()">添加</el-button>
        </el-col>
      </el-row>
    <el-row>
        <el-col :span="24">
          <el-table :data="empList" border size="mini" header-cell-class-name="header-row" align="center">
            <el-table-column prop="empnum" label="编号" header-align="center" align="center"></el-table-column>
            <el-table-column prop="empname" label="姓名" header-align="center" align="center"></el-table-column>
            <el-table-column   label="性别" header-align="center" align="center">
              <template slot-scope="scope">
                <span v-if='scope.row.gender==0'>男</span>
                <span v-if='scope.row.gender==1'>女</span>
              </template>
            </el-table-column>
            <el-table-column prop="birthday" label="生日" width="200px" header-align="center" align="center"></el-table-column>
            <el-table-column prop="phone" label="电话" header-align="center" align="center"></el-table-column>
            <el-table-column prop="dept.deptname"  label="部门名称" header-align="center" align="center"></el-table-column>
            <el-table-column label="操作" header-align="center" align="center" width="200">
              <template slot-scope="scope">
                <el-button v-show="permission.edit" type="primary" size="mini"
                  @click="handleEditRouter(scope.$index, scope.row)">编辑</el-button>
                <el-button v-show="permission.remove" type="danger" size="mini"
                  @click="handleDeleteRouter(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="search.currentPage"
            :page-sizes="[2, 5, 10]"
            :page-size="2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="empTotal">
          </el-pagination>
        </el-col>
      </el-row>
  </div>
</template>

<script>

import {listEmp,removeEmp} from '@/api/emp'
import EmpEdit from "@/components/emp/empEdit"

export default {
  data() {
    return {
      empList:[],
      empTotal:0,
      loading: false,
      permission: {
        add: true,
        edit: true,
        remove: true
      },
      search: {
        name: '',
        offset: 0,
        limit: 2,
        currentPage:1,
        deptId:null
      },
      depts:[
        {value:'',label:'请选择'},
        {value:'1',label:'开发部'},
        {value:'2',label:'财务部'},
        {value:'3',label:'后勤部'}
      ]
    }
  },
  methods: {
    getRoleList() {
      this.loading = true
      listEmp(this.search)
      .then(response => {
        this.empTotal = response.data.total
        this.empList = response.data.rows
        this.loading = false
      })
      .catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.search.limit = val;
      this.search.offset = (this.search.currentPage - 1) * val
      this.getRoleList()
    },
    handleCurrentChange(val) {
      this.search.offset = (val - 1) * this.search.limit
      this.search.currentPage = val
      this.getRoleList()
    },
    async pageInit() {
      this.loading = true
      try {
        let [listEmpResp] = await Promise.all([
          listEmp(this.search)
          //listResourcePermission(this.$route.meta.routerId)
        ])
        //console.log(listEmpResp)
        this.empTotal = listEmpResp.data.total
        this.empList = listEmpResp.data.rows,
        this.loading = false
      } catch(error) {
        //this.outputError(error)
      }
    },
    handleEditRouter(index,row){

      this.$refs.empEdit.$emit('openEditRoleDialog',row)
    },
    handleCreateEmp(){
      this.$refs.empEdit.$emit('openAddRoleDialog');
    },
    handleDeleteRouter(index,row){
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        this.loading = true
        removeEmp(row.id)
        .then(response => {
          this.loading = false
          this.getRoleList()
        })
        .catch(error => {
          this.outputError(error)
        })
       })
      .catch(() => {})
    }

  },
  components: { EmpEdit },
  created() {
    this.pageInit()
  }
}

</script>

<style lang="scss" scoped>
.search-row {
  padding-bottom: 8px;
  .el-input {
    width: 260px;
  }
}

.role-locked {
  color: red;
}
.role-not-locked {
  color: green;
}
</style>
